<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

import NavBack from "@/components/nav/back.vue";
import MediaVideo from "@/components/media/video.vue";

onLoad((options) => {
  videoData.src = decodeURIComponent(options?.src);
  videoData.poster = decodeURIComponent(options?.poster);
  infoData.title = decodeURIComponent(options?.title);
});

const videoData = reactive({ src: "", poster: "" });

const infoData = reactive({ title: "" });
</script>

<template>
  <NavBack navigationBarTextStyle="white" />

  <view class="detail-source">
    <MediaVideo
      :src="videoData.src"
      :poster="videoData.poster"
      autoplay
      showFullscreenBtn
    />
  </view>

  <view class="detail-fixed">
    <view class="detail-title" v-if="infoData.title">
      {{ infoData.title }}
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #000000;
}

.detail-source {
  width: 100vw;
  height: calc(100vh - env(safe-area-inset-bottom));
}

.detail-fixed {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: calc(108rpx + env(safe-area-inset-bottom));

  .detail-title {
    font-size: 32rpx;
    color: #f8f8f8;
    line-height: 44rpx;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // text-overflow: ellipsis;
    // overflow: hidden;
  }
}
</style>